<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .floor{width: 800px;height: 500px;margin: 20px auto;line-height: 500px;font-size:100px;text-align: center;}
        .floor1{background: #669}
        .floor2{background: #696}
        .floor3{background: #996}
        .floor4{background: #969}
        .floor5{background: #699}
        .floor6{background: #966}

        .btns{width: 100px;line-height: 30px;padding: 0;margin: 0;list-style: none;position: fixed;left:0;top:200px;text-align: center;}
        .btns li{margin: 4px 0;background: #efefef;}
        .btns li:hover{background: red;color: #fff;cursor: pointer}
        .btns li:active{background: #66f}

    </style>
</head>
<body>
    <div class="floor floor1">衣服</div>
    <div class="floor floor2">电脑</div>
    <div class="floor floor3">食品</div>
    <div class="floor floor4">房子</div>
    <div class="floor floor5">汽车</div>
    <div class="floor floor6">玩游戏</div>
    <ul class="btns">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
<script src="./libs/jquery.js"></script>
<script>
    $(".btns").children("li").click(function(){
        // 获取点击元素
        // console.log($(this));
        // 获取点击元素的索引
        // console.log($(this).index());
        // 根据索引获取指定楼层
        // console.log($(".floor").eq($(this).index()));
        // 获取指定楼层距离顶部的位置
        // console.log($(".floor").eq($(this).index()).offset().top)
        
        // 利用动画方法，将获取到的指定楼层距离顶部的位置，设置给有滚动条的元素的滚动位置
        $("html").stop().animate({
            scrollTop: $(".floor").eq($(this).index()).offset().top
        })
    })

    // 滚动页面时，楼层对应的按钮，需要有当前项显示
    
</script>
</html>